<template>
  <div v-loading="loading" class="page-wrapper">
    <el-tabs v-model="curType" type="border-card">
      <el-tab-pane label="通道" name="way">
        <way-view :way-list="wayList" @wayChange="selectChanAnddev" />
      </el-tab-pane>
      <el-tab-pane label="设备" name="dev">
        <dev-view
          v-if="wayList && wayList.length"
          :way-list="wayList"
          @devChange="selectChanAnddev"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import WayView from "./components/WayView";
import DevView from "./components/DevView";
// import bus from '@/utils/bus'
export default {
  name: "Communication",
  components: { WayView, DevView },
  data() {
    return {
      curType: "way",
      editType: "TD",
      wayList: [],
      loading: false,
      // devList: []
    };
  },
  watch: {
    curType(v) {
      const p = this.$route.path;
      const q = {
        type: v
      };
      this.$router.push({
        path: p,
        query: q
      });
    }
  },
  async created() {
    this.curType = this.$route.query.type || this.curType;
    try {
      this.loading = true;
      await this.selectChanAnddev();
    } finally {
      this.loading = false;
    }
  },
  mounted() {
    // this.devListData()
  },
  methods: {
    selectChanAnddev() {
      return this.$axios.get("fes/device/selectChanAnddev").then(res => {
        this.wayList = res.data;
      });
    },
    // devListData() {
    //   bus.$on("devList", msg => {
    //     console.log("devList", msg)
    //     const params = {
    //       channelId: msg,
    //     };
    //     return this.$axios.get("fes/device/selectDev", { params }).then(res => {
    //       this.devList = res.data;
    //     });
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

/deep/ .top-content {
  // display: flex;
  // justify-content: space-between;
  .row {
    display: flex;
    align-items: center;
    height: 50px;
    margin-bottom: 14px;
    img {
      margin-right: 4px;
      width: 30px;
    }
    .item {
      display: flex;
      align-items: center;
    }
    .el-select,
    .el-input {
      margin-right: 20px;
      width: 200px;
    }
    button.b-primary {
      margin-left: 20px;
    }
  }
}
/deep/ .edit-wrapper {
  .left,
  .right {
    width: 40%;
  }
  .top {
    display: flex;
    justify-content: space-between;
    .right {
      .el-tabs {
        // width: 600px;
      }
    }
  }
  .func {
    width: 40%;
    margin: 20px auto 0;
  }
}
</style>
